<template>
  <div>
    <div class="data">
      <div class="searchForm">
        <el-form :inline="true" :model="params" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input
              v-model="params.name"
              placeholder="按姓名称查找"
              class="block"
            ></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input
              v-model="params.nickName"
              placeholder="按昵称查找"
              class="block"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="searchList"
              class="block"
              >查询</el-button
            >
            <el-button type="danger" icon="el-icon-plus" @click="edit()"
              >增加</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="message">
      <div class="message1">
        <el-table :data="rows" stripe style="width: 100%">
          <el-table-column prop="photo" label="头像">
            <template slot-scope="scope">
              <img
                v-if="scope.row.photo"
                class="photo"
                :src="scope.row.photo"
              />
              <img v-else class="photo" src="@/assets/photo.png" />
            </template>
          </el-table-column>
          <el-table-column prop="name"> </el-table-column>
          <el-table-column prop="nickName" label="昵称"> </el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
              {{ scope.row.sex == 2 ? "女" : "男" }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="是否启用">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                @change="changeStatus(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="320">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="edit(scope.row)"
                >编辑</el-button
              >
              <!-- 打开弹框 编辑用户权限 -->
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-paperclip"
                @click="openGroup(scope.row.userId)"
                >分配权限</el-button
              >
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-refresh-right"
                @click="resetPassWord(scope.row)"
                >重置密码</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="params.pageNum"
        :page-sizes="[10, 100, 200, 300, 400]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="分配权限" :visible.sync="visible">
      <group ref="group"></group>
    </el-dialog>
    <el-dialog :title="editTitle" :visible.sync="editVisible">
      <group ref="group"></group>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item v-if="!ruleForm.userId" label="用户名" prop="userName">
          <el-input v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="photo">
      <el-upload
        class="avatar-uploader"
        :action="baseURL + '/upload'"
        :headers="headers"
        :on-success="onSuccess"
        :limit="3"
        :file-list="fileList"
        :show-file-list="true">
        <img v-if="ruleForm.photo" :src="ruleForm.photo" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
        <!-- <el-form-item label="头像" prop="photo">
          <upload
            class="avatar-uploader"
            action="/upload"
            :headers="headers"
            :cicle="true"
            :on-success="onSuccess"
          >
            <img v-if="ruleForm.photo" :src="ruleForm.photo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </upload>
        </el-form-item> -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="ruleForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
          <el-radio v-model="ruleForm.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="editVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "js-md5";
import group from "./group";
import api from '../../api';
export default {
  name: "userList",
  components: {
    group,
  },
  props: {},
  data() {
    return {
      loading: false,
      params: {
        pageSize: 10,
        pageNum: 1,
        name: "",
        nickName: "",
      },
      total: 0,
      rows: [],
      visible: false,
      editVisible: false,
      ruleForm: {
        name: "",
        nickName: "",
        sex: 1,
        id: "",
        photo: "",
      },
      headers: {
        //获取token
        token: localStorage.getItem("token"),
      },
      fileList: [],
      rules: {},
      editTitle: "",
      baseURL:api.baseURL,
    };
  },
  methods: {
    edit(row) {
      this.editVisible = true;
      if (row) {
        this.editTitle = "修改用户";
        this.ruleForm = row;
      } else {
        this.editTitle = "新增用户";
        this.ruleForm = {
          name: "",
          nickName: "",
          sex: '1',
          id: "",
          photo: "",
        };
      }
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http({
            url: this.ruleForm.id ? "/user/update" : "/user/add",
            method: !this.ruleForm.id ? "POST" : "PUT",
            data: this.ruleForm,
          }).then((res) => {
            if (!res.errorMsg) {
              this.$message({
                message: !this.ruleForm.id
                  ? "添加用户成功"
                  : "修改用户信息成功",
                type: "success",
              });
              this.editVisible = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    openGroup(userId) {
      //打开弹框
      this.visible = true;
      //延迟更新
      this.$nextTick(() => {
        //调用组件方法 获取数据
        this.$refs.group.getList(userId);
      });
    },
    resetPassWord(row) {
      this.$confirm("是否重置该用户的密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        row.passWord = md5("123456");
        this.$http({
          url: "/user/update",
          method: "PUT",
          data: row,
        }).then((res) => {
          if (!res.errorMsg) {
            this.$message({
              message: "重置该用户密码成功",
              type: "success",
            });
          }
        });
      });
    },
    changeStatus(row) {
      this.$http({
        url: "/user/update",
        method: "PUT",
        data: row,
      }).then((res) => {
        console.log(res);
      });
    },
    sizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.params.pageNum = 1;
      this.getList();
    },
    currentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.getList();
    },
    searchList() {
      this.params.pageNum = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.$http({
        url: "http://localhost:8081/user/list",
        method: "GET",
        params: this.params,
      }).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.rows = res.rows;
      });
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>

<style scoped>
</style>
